<!-- 列表卡片 loading -->

<template>
	<!-- 动态绑定style，可以简写width、height -->
    <div class="xtx-skeleton" :style="{width:width,height}" :class="{shan:animated}">
        <div class="block" :style="{backgroundColor:bg}"></div>
    </div>
</template>

<script>
export default{
    name:'xtx-sketelon',
    props:{
        bg: {
			type: String,
			default: '#eee',
		},
		width: {
			type: String,
			default: '100px',
		},
		height: {
			type: String,
			default: '100px',
		},
		animated: {
			type: Boolean,
			default: false,
		},
    }
}
</script>

<style lang="less" scoped>

.xtx-skeleton{
	display: inline-block;
	position: absolute;
	overflow: hidden;
	vertical-align: middle;
	.block{
		width: 100%;
		height: 100%;
		border-radius: 2px;
	}
}

/*动态class*/
.shan{
	/* 伪元素选择器，::after 在每个 shan 的内容之后插入内容。通常用于处理动画或清除浮动 */
	&::after{
		position: absolute;
		width: 50%;
		height: 100%;
		top: 0;
		left: 0;
		/*content 属性与伪元素 ::before 和 ::after 一起使用，
		用于在选定的元素前或后插入生成的内容。这个属性非常有用，
		因为它允许你在不修改HTML结构的情况下添加装饰性内容或额外信息。*/
		content:'';
		background: linear-gradient(
			to left,
			rgba(255, 255, 255, 0) 0,
			rgba(255, 255, 255, 0.3) 50%,
			rgba(255, 255, 255, 0) 100%
		);
		/* x轴，逆时针旋转45角度 */
		transform: skewX(-45deg);

		/*动画名，时长，插值器，延迟事件，播放次数，方向 动画完成后属性保持 infinite 表示无限循环*/
		animation: shan 1.5s ease 0s infinite;
	}

	
}

@keyframes shan{
	0%{
		/*这个指：左边距，因为目标元素设定是 absolute*/
		left:-100%;
	}
	100%{
		left:120%;
	}
}
</style>